<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>3D Car</title>
    <script src="js/jq.min.js"></script>
    <script src="js/catPlug.js"></script>
    <script src="js/min.js"></script>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #000;
        }

        #leftBtns {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -3.23333333rem;
            width: 1.41333333rem;
            height: 6.46666667rem;
            background: url(1.png) no-repeat 0 0;
            background-size: 100% auto;
            z-index: 950;
        }

        #rightBtns {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 40px;
            height: 40px;
            padding: 0 20px 20px 0;
            background: url(7.png) no-repeat 0 0;
            background-size: 40px auto;
            z-index: 900;
            display: none;
        }

        .iframe-box{
            position: absolute;
            top:0;
            left:0;
            z-index: 1;
            display: none;
        }

        .loading{
            position: absolute;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 30px;
            top:50%;
            left:0;

        }
        a{
            text-decoration: none;
        }

        #leftBtns a {
            display: block;
            width: 100%;
            height: 3.23333333rem;
        }

        #leftBtns a {
            display: block;
            width: 100%;
            height: 3.23333333rem;
        }

    </style>
    <script>
        shanGong.remInit(1750, 75); // 最大适配

    </script>
</head>
<body>
<div class="loading" id="loading"></div>

<div class="canvasContainer" id="canvasContainer" style="display: none;"></div>

<script src="js/main.js"></script>
<img id="label-img" src ="label.png"  style="display: none"/>
<script>
    var $loading = document.getElementById('loading');
    function openDoor(){
        console.info('车门打开了');
        $rightBtn.style.display = 'block';
        $iframeBox.style.display = 'block';
    }

    function openTrunk(){
        console.info('后备箱打开了');
    }

    var debug = true;

    /**
     * 渲染时间
     * @param oop
     * @param fun
     */
    function loadAgain(oop,fun) {
        if(debug == true){
            loaded(100);
            return;
        }
        var setTime = setInterval(function () {
            oop ++ ;
            fun.call(this,oop);
            if(oop>= 100) clearTimeout(setTime);
        },350)
    }

    function loaded(load) {
        $loading.innerHTML = '加载进度：'+ load + '%';
        if(load == 100){
            $loading.style.display = 'none';
            document.getElementById('canvasContainer').style.display = 'block';
        }
    }

    function onLoadProgress(xhr) {
        if ( xhr.lengthComputable ) {

            var percentComplete = xhr.loaded / xhr.total * 100;
            //console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
            var per = Math.round(percentComplete, 2 );

            var oop = per - 0;
            oop = oop < 0 ? 0 : oop;

            if(oop == 100){
                //debugger;
                loadAgain(oop,function (oop) {
                   loaded(oop)
                })
            }
            loaded(oop)


        }
    }
</script>

</body>
</html>